<template>
  <div class="redis-monitor">
    <ve-line :data="commandNumberMonitor" :settings="commandMonitorSettings"></ve-line>
    <ve-histogram :data="commandSourceStatistics" :settings="commandSourceSettings"></ve-histogram>
    {{monitor}} {{redisInfo}}
  </div>
</template>

<script>
  import {commandMonitor, getKeys, countCommandCluster} from '../../api/redis/redisMonitor'
  import {isCluster} from '../../api/redis/redisInfo'

  export default {
    name: 'Monitor',
    props: ['redisInfo'],
    data () {
      return {
        interval: null,
        isCluster: false,
        monitor: {},
        redisData: this.redisInfo,
        commandMonitorSettings: {
          stack: {'命令数': ['地址1', '地址2']},
          area: true
        },
        commandNumberMonitor: {
          columns: ['时间', '地址1', '地址2'],
          rows: []
        },
        commandSourceSettings: {
          stack: {'来源': ['1', '2', '3', '4', '5', '6', '7']},
          showLine: ['下单用户']
        },
        commandSourceStatistics: {
          columns: ['来源', '1', '2', '3', '4', '5', '6', '7'],
          rows: [
            {'来源': '1/1', '1': 1393, '2': 1093, '3': 1093, '4': 1093, '5': 193, '6': 93, '7': 103},
            {'来源': '1/2', '1': 3530, '2': 3230, '3': 1093, '4': 103, '5': 103, '6': 193, '7': 93},
            {'来源': '1/1', '1': 1393, '2': 1093, '3': 1093, '4': 1093, '5': 193, '6': 93, '7': 103},
            {'来源': '1/2', '1': 3530, '2': 3230, '3': 1093, '4': 103, '5': 103, '6': 193, '7': 93},
            {'来源': '1/1', '1': 1393, '2': 1093, '3': 1093, '4': 1093, '5': 193, '6': 93, '7': 103}
          ]
        }
      }
    },
    methods: {
      monitorCommand () {
        commandMonitor(this.redisInfo, 0, (doc) => {
          console.log(doc)
        })
        if (this.interval == null) {
          this.interval = setInterval(() => {
            this.refreshCommandMonitor()
            getKeys(this.redisInfo, 0, (doc) => {
              this.monitor = doc
            })
          }, 1000)
        }
      },
      refreshCommandMonitor () {
        let date = new Date(new Date().getTime() - 3000)
        let time = date.getTime().toString().substring(0, 10)
        // listCommandMonitor(this.redisInfo.host, time, (res) => {
        //   this.commandNumberMonitor.rows.push({'时间': date.toLocaleString(), '命令数': res})
        //   if (this.commandNumberMonitor.rows.length > 10) {
        //     this.commandNumberMonitor.rows.shift()
        //   }
        // })
        countCommandCluster(this.redisInfo, time, (res) => {
          debugger
          console.log(res)
        })
      }
    },
    created () {
      isCluster(this.redisInfo, 0, (doc) => {
        this.isCluster = doc
        this.monitorCommand()
      })
    }
  }
</script>

<style scoped>

</style>